<template>
	<view class="collect-information flex-column-start-center" :style="{ 'background-image': `url(${bgUrl})` }">
		<mBack @getGameResult="handleBack" v-if="hasRegister"></mBack>
		<view class="top-title" :style="{ 'margin-top': (menuButtonInfo.top + menuButtonInfo.height + 94) + 'rpx' }">
			完善你的资料
		</view>
		<view class="info-box flex-column-start-center">
			<view class="info-input-item flex-row-start-center" v-for="(item, index) in inputDatas" :key="index">
				<view class="input-label">{{ item.label }}</view>
				<view class="input-content" @click="handleInfoItemClick(item)">
					<!-- 无值 -->
					<template v-if="!item.value">
						<view class="input-avatar flex-row-center-center" v-if="item.valueType == 'avatar'">
							<image class="add-icon" src="https://cdn.osisx.com/runse/images/add-avatar-icon.png"
								mode="aspectFill"></image>
						</view>
						<view class="input-placeholder"
							v-if="(item.valueType == 'nick-name' || item.valueType == 'date' || item.valueType == 'mbti')">
							{{ item.placeholder }}
						</view>
					</template>

					<template v-if="item.value">
						<!-- 有值 -->
						<image v-if="item.valueType == 'avatar'" class="input-avatar" :src="item.value"
							mode="aspectFill">
						</image>
						<view class="input-tag" v-if="(item.valueType == 'nick-name' || item.valueType == 'date')">
							{{ item.value }}
						</view>
						<view class="check-input flex-row-start-center" v-if="item.valueType == 'mbti' && mbtiSource">
							<view class="mbti-type flex-row-center-center">
								<image class="mbti-avatar" :src="mbtiSource.smallAvatar" mode="aspectFill"></image>
								<text class="mbti-label">{{ mbtiSource.key }}</text>
							</view>
						</view>
					</template>
					<view class="sex-box flex-row-start-center" v-if="item.valueType == 'sex'">
						<view class="sex-item flex-row-center-center"
							:class="{ 'man': formData.sex === '男' && formData.sex == citem.value, 'woman': formData.sex === '女' && formData.sex == citem.value }"
							v-for="(citem, cindex) in sexs" :key="cindex" @click.stop="handleSexClick(citem.value)">
							<image class="sex-icon" :src="citem.icon" mode="aspectFill"></image>
							<view class="sex-text">
								{{ citem.label }}
							</view>
						</view>
					</view>

				</view>
			</view>


		</view>
		<view class="bottom-btn flex-row-center-center">
			<view class="btn-content flex-row-center-center" :class="{ 'btn-cansubmit': canSubmit }"
				@click="handleSave">
				{{ hasRegister ? '保存' : '注册' }}
			</view>
		</view>

		<mbtiPop ref="mbtiPop" @confirmValue="handlePopConfirm" :inputAlignRight="true" @cancel="handlePopCancel"
			@callBack='isChangeMbti = false' :dateConfirmClose="true">
			<view class="mbit-box" v-if="isChangeMbti">
				<view class="mbti-list flex-row-start-start" v-if="sourceList">
					<view class="mbti-item flex-column-start-center"
						:style="{ 'border-color': item.mbti == actMbtiKey ? item.actColor : 'transparent' }"
						v-for="(item, index) in sourceList" :key="index" @click="handleMbtiClick(item)">
						<image class="m-avatar" :src="item.smallAvatar" mode="aspectFill"></image>
						<view class="m-label">{{ item.key }}</view>
						<view class="m-nickName">{{ item.nickName }}</view>
					</view>
				</view>

			</view>
		</mbtiPop>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
	} from 'vuex';
	import mbtiPop from "@/components/m-mbti/mbti-pop.vue"
	import mBack from "@/components/m-test/index.vue"
	import {
		getMbtiSourceByKey,
		getAllMbtiData
	} from "@/utils/mbti-source.js"
	import {
		login
	} from "@/utils/mbti-login.js"
	import {
		runRegister,
		updateUser
	} from '@/api/mbti.js'
	import socketService from './socket.js';
	export default {
		components: {
			mbtiPop,
			mBack
		},
		data() {
			return {
				hasRegister: false,
				formData: {
					avatar: "",
					username: "",
					sex: null,
					birthday: "",
					mbti: null,
					openid: null
				},
				sourceList: [],
				titleTop: 0,
				actMbtiKey: "",
				sexs: [{
						label: "男",
						value: "男",
						icon: "https://cdn.osisx.com/runse/images/man-icon.png"
					},
					{
						label: "女",
						value: "女",
						icon: "https://cdn.osisx.com/runse/images/woman-icon.png"
					},
				],

				isChangeMbti: false,
				bgUrl: "https://cdn.osisx.com/runse/images/bg.png",
				inputDatas: [{
						type: "label-in",
						label: "头像",
						value: "",
						limit: -1,
						valueType: "avatar",
						code: "avatar",
						isRequire: true
					},
					{
						type: "label-in",
						label: "昵称",
						value: "",
						limit: -1,
						valueType: "nick-name",
						placeholder: "设置你的昵称",
						code: "username",
						isRequire: true
					},
					{
						type: "label-in",
						label: "性别",
						tip: "选择你的性别",
						value: "",
						code: "sex",
						valueType: "sex",
						limit: -1,
						isRequire: true
					},
					{
						type: "label-in",
						label: "生日",
						tip: "选择你的生日",
						value: "",
						code: "birthday",
						valueType: "date",
						limit: -1,
						isRequire: true,
						placeholder: "选择你的生日",
					},

					{
						type: null,
						label: "MBTI",
						tip: "选择你的MBTI",
						value: "",
						code: "mbti",
						valueType: "mbti",
						limit: -1,
						isRequire: true,
						placeholder: "选择你的MBTI",
					},
				],

			};
		},
		created() {
			try {
				let arr = getAllMbtiData()
				this.sourceList = arr.map((item) => {
					item.mbti = item.key
					item.key = String(item.key).toUpperCase()
					return item
				})

			} catch (error) {
				//TODO handle the exception
			}
		},
		onShow() {
			this.handleRefreshLogin()
		},
		watch: {
			formData: {
				handler(newVal, oldVal) {
					if (newVal) {
						Object.entries(newVal).forEach((item, index) => {
							this.inputDatas.forEach((citem, cindex) => {
								if (citem.code == item[0]) {
									citem.value = item[1]
								}
							})
						})

						if (newVal.mbti) {
							console.log("更新mbti", newVal)
							this.actMbtiKey = newVal.mbti
						}
					}
				},
				deep: true,
				immediate: true
			},
			actMbtiKey: {
				handler(newVal, oldVal) {
					if (newVal) {
						if (this.$refs.mbtiPop && this.$refs.mbtiPop.handleControlConfirm && newVal) {
							this.$refs.mbtiPop.handleControlConfirm(true)
							this.$refs.mbtiPop.handleConfirmIonClick()
						}
					}
				},
				immediate: true
			},
		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['menuButtonInfo']),
			canSubmit() {
				return Object.values(this.formData).every(value => value === 0 || Boolean(value))
			},
			mbtiSource() {
				if (this.formData.mbti) {
					let source = [...this.sourceList].filter((item, index) => {
						return String(item.mbti).toLowerCase() == String(this.formData.mbti).toLowerCase()
					})
					return source[0]
				} else {
					return null
				}

			}
		},
		methods: {
			handleRefreshLogin() {
				login().then(res => {
					if (res.user) {
						let {
							openid,
							avatar,
							birthday,
							mbti,
							sex,
							username
						} = res.user
						this.hasRegister = res.hasRegister
						this.formData.openid = openid
						this.formData.avatar = avatar
						this.formData.birthday = birthday
						this.formData.mbti = mbti
						this.formData.sex = sex
						this.formData.username = username
					} else {
						this.formData.openid = res.openid
					}
					console.log("爸爸", this.formData)
				})
			},
			handleBack() {
				uni.navigateBack()
			},
			async handleSave() {
				if (this.canSubmit) {
					// 注册过了就更新用户信息
					if (this.hasRegister) {
						updateUser(this.formData).then(res => {
							this.handleRefreshLogin()
							uni.showToast({
								title: "保存成功",
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						})
					} else {
						// 没注册过就走注册
						runRegister(this.formData).then(res => {
							// 刷新登录
							this.handleRefreshLogin()
							uni.showToast({
								title: "注册成功",
								icon: 'none'
							})
							// if (!socketService.isConnected && this.userInfo) {
							// 	socketService.connect(this.userInfo.userId)
							// }
							uni.navigateBack()
						})
					}
				} else {
					console.log('信息是', this.formData)
					uni.showToast({
						title: "请将先将信息填写完整",
						icon: "none"
					})
				}
			},
			handlePopCancel() {
				if (this.isChangeMbti) {
					this.actMbtiKey = ""
				}
				this.isChangeMbti = false
			},
			handleMbtiClick(item) {
				this.actMbtiKey = item.mbti

				// if (this.$refs.mbtiPop) {

				// 	this.$refs.mbtiPop.handleConfirmIonClick()
				// }

			},
			handleSexClick(value) {
				this.formData.sex = value
			},
			handlePopConfirm(e) {
				let arr = [...e.data]
				arr.forEach((item, index) => {
					this.formData[String(item.code)] = item.value
				})
				this.formData.mbti = this.actMbtiKey
				this.isChangeMbti = false
			},
			handleInfoItemClick(item) {
				if (item.valueType != 'sex') {
					if (item.valueType == 'mbti') {
						this.isChangeMbti = true
						this.actMbtiKey = this.formData.mbti
					}
					this.handleOpenPop(item)
				}
			},
			handleOpenPop(data) {
				let inputData = [{
					...data
				}]
				this.$refs.mbtiPop.open({
					data: inputData,
					title: "",
				})
			}
		}
	}
</script>

<style lang="scss">
	.collect-information {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100%;
		height: 100%;
		background-color: #ededed;
		box-sizing: border-box;
		padding: 0px 48rpx;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		overflow: hidden;

		.top-title {
			width: 100%;
			height: 72rpx;
			font-family: "MiSans-Normal";
			font-weight: 400;
			font-size: 54rpx;
			color: #272F5F;
			line-height: 72rpx;
			margin-bottom: 120rpx;
		}

		.info-box {
			width: 100%;
			gap: 48rpx;
			box-sizing: border-box;
			margin-bottom: 240rpx;

			.info-input-item {
				width: 100%;

				.input-label {
					height: 40rpx;
					font-family: "MiSans-Light";
					font-weight: 300;
					font-size: 30rpx;
					color: #272F5F;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					margin-right: 22rpx;
				}

				.input-content {
					flex: 1;

					.input-avatar {
						width: 132rpx;
						height: 132rpx;
						background: rgba(242, 242, 242, 0.6);
						border-radius: 12rpx;

						.add-icon {
							width: 36rpx;
							height: 36rpx;
						}
					}



					.input-tag,
					.check-input,
					.input-placeholder {
						flex: 1;
						background: rgba(242, 242, 242, 0.6);
						border-radius: 12rpx;
						padding: 22rpx 28rpx;

						font-family: "MiSans-Medium";
						font-weight: 500;
						font-size: 30rpx;
						color: #272F5F;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}

					.check-input {
						color: #979797;

						.mbti-type {
							width: 100%;
							gap: 18rpx;

							.mbti-avatar {
								width: 48rpx;
								height: 48rpx;
							}

							.mbti-label {
								flex: 1;
								height: 40rpx;
								font-family: "MiSans-Medium";
								font-weight: 500;
								font-size: 30rpx;
								color: #272F5F;
								line-height: 40rpx;

							}

						}
					}

					.input-placeholder {
						font-family: "MiSans-Light";
						font-weight: 300;
						font-size: 30rpx;
						color: #979797;
						line-height: 40rpx;
					}

					.sex-box {
						width: 100%;
						height: 84rpx;
						gap: 34rpx;

						.sex-item {
							flex: 1;
							height: 100%;
							background: rgba(242, 242, 242, 0.6);
							border-radius: 12rpx;
							border: 2rpx solid transparent;


							.sex-text {
								height: 40rpx;
								font-family: "MiSans-Light";
								font-weight: 300;
								font-size: 30rpx;
								color: #494949;
								line-height: 40rpx;
							}

							.sex-icon {
								width: 48rpx;
								height: 48rpx;
								margin-right: 18rpx;
							}
						}

						.man {
							border-color: #0183FA;

							.sex-text {
								font-family: "MiSans-Medium";
								font-weight: 500;
							}
						}

						.woman {
							border-color: #FF3B6E;

							.sex-text {
								font-family: "MiSans-Medium";
								font-weight: 500;
							}
						}
					}
				}
			}
		}


		.bottom-btn {
			width: 100%;
			padding: 0rpx 70rpx;

			.btn-content {
				flex: 1;
				height: 86rpx;
				background: #FFFFFF;
				border-radius: 46rpx;

				font-family: "MiSans-Normal";
				font-weight: 400;
				font-size: 34rpx;
				color: #979797;
				line-height: 86rpx;
			}

			.btn-cansubmit {
				background: linear-gradient(135deg, #FE85EB 0%, #616CFF 100%);
				color: #FFFFFF;
			}
		}

		.mbit-box {
			width: 100%;
			height: 100%;
			overflow-y: scroll;

			.mbti-list {
				width: 100%;
				flex-wrap: wrap;
				gap: 18rpx;

				.mbti-item {
					width: calc((100% - 54rpx)/4);
					height: 200rpx;
					background: #FFFFFF;
					border-radius: 12rpx;
					border: 2rpx solid transparent;

					.m-avatar {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-bottom: 20rpx;
						margin-top: 24rpx;

					}

					.m-label {
						width: 100%;
						text-align: center;
						height: 38rpx;
						font-family: "MiSans-Demibold";
						font-weight: 600;
						font-size: 28rpx;
						color: #494949;
						line-height: 38rpx;
						margin-bottom: 2rpx;
					}

					.m-nickName {
						width: 100%;
						height: 26rpx;
						text-align: center;
						font-family: "MiSans-Normal";
						font-weight: 400;
						font-size: 20rpx;
						color: #979797;
						line-height: 26rpx;
					}
				}
			}
		}
	}
</style>